<script setup lang="ts">
import { reactive } from 'vue'
import type { TableData } from '@/api/table/types'
import { Descriptions } from '@/components/Descriptions'
import { useI18n } from '@/hooks/web/useI18n'
// import { ElTag } from 'element-plus'
import { DescriptionsSchema } from '@/types/descriptions'

const { t } = useI18n()

defineProps({
  currentRow: {
    type: Object,
    default: () => null
  }
})

const schema = reactive<DescriptionsSchema[]>([
  {
    field: 'msgCategory_dictText',
    label: t('announcement.msgCategory_dictText')
  },
  {
    field: 'title',
    label: t('announcement.title')
  },
  {
    field: 'msgAbstract',
    label: t('announcement.remark'),
    span: 24
  },
  {
    field: 'endTime',
    label: t('announcement.endTime')
  },
  {
    field: 'msgType_dictText',
    label: t('announcement.msgType')
  },
  {
    field: 'priority_dictText',
    label: t('announcement.msgCategory_dictText'),
    span: 24
  },
  {
    field: 'msgContent',
    label: t('announcement.msgContent'),
    span: 24
  }
])
</script>

<template>
  <Descriptions :schema="schema" :data="currentRow || {}">
    <template #priority_dictText="{ row }">
      <template v-if="row.msgType === 'USER'"> {{ row.priority_dictText }} </template>
    </template>

    <template #msgContent="{ row }">
      <div v-html="row?.msgContent"></div>
    </template>
  </Descriptions>
</template>
